<template>
    <view class='content'>
        <!-- <view class="search">
            <view class="search-l">
                <view>上海</view>
                <image src="/static/jt-down.png" />
            </view>
            <view class="search-r">
                <image src="/static/store-search.png" />
                <input v-model="searchValue" placeholder="请输入关键字" />
            </view>
        </view> -->
        <view class="main">
            <view class="info box" v-for="item in list" :key="item" @click="checkStore(item)">
                <view class="info-tit">
                    <view class="title">
                        <view class="name">{{item.shopName}}</view>
                        <!-- <view class="idle">空闲球台：{{item.leisureBilliardNumber || 0}}</view> -->
                    </view>
                </view>
                <view class="price">￥48.00/小时起</view>
                <view class="business-hours">
                    <view class="business">营业中</view>
                    <view class="hours">7*24小时营业</view>
                </view>
                <view class="address">
                    <view class="address-l">
                        <image src="/static/store-dw.png" />
                        <view>{{item.shopAddress}}</view>
                    </view>
                    <view class="address-r">距离{{ filterTofixed(item.distance) }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from 'vue';
import {queryShopPage} from '@/service/index'
const searchValue = ref('')
const list = ref([])
const getData = ()=>{
    const params = {
         "pageNo": 1,
        "pageSize": 10
    }
    queryShopPage(params).then(res=>{
        console.log(res);
        list.value = res.list
    })
}
const goPlaceOrder = (item)=>{
    uni.navigateTo({
	    url: `/pages/order/placeOrder?id=${item.id}`
	});
}
const checkStore = (item)=>{
    uni.setStorageSync('mainStoreInfo', item)
    uni.setStorageSync("store", item);
    uni.switchTab({
        url: '/pages/index/index'
    })
}
const filterTofixed = (value) => {
  if (value > 1) {
    return value.toFixed(1) + "km";
  }
  if (value < 1) {
    return (value * 1000).toFixed(0) + "m";
  }
  return 0;
};
onMounted(()=>{
    getData()
})
</script>
<style lang='less' scoped>
.content {
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    .search {
        display: flex;
        align-items: center;
        height: 88rpx;
        background: #FFFFFF;
        border-radius: 44rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        padding: 24rpx 42rpx;
        box-sizing: border-box;
        margin-bottom: 24rpx;

        .search-l {
            display: flex;
            align-items: center;
            border-right: 2rpx solid #EEEEEE;
            padding-right: 24rpx;

            image {
                height: 14rpx;
                width: 14rpx;
                margin-left: 10rpx;
            }
        }

        .search-r {
            display: flex;
            align-items: center;
            padding-left: 24rpx;

            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }

            input {
                flex: 1;
            }
        }
    }

    .main {
        flex: 1;
        height: 100%;
        overflow-y: scroll;
        .info {
            padding: 24rpx 26rpx;
            margin-bottom: 24rpx;
            
            .info-tit {
                display: flex;
                align-items: center;

                .title {
                    font-size: 32rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    font-weight: bold;
                    margin-bottom: 12rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .name {
                        flex: 1;
                        margin-right: 10rpx;
                    }

                    .idle {
                        font-size: 28rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        color: #009A44;
                        flex-wrap: nowrap;
                    }
                }

                .contact {
                    font-size: 20rpx;
                    flex-wrap: nowrap;
                    display: flex;
                    align-items: center;

                    image {
                        width: 40rpx;
                        height: 40rpx;
                        margin-left: 10rpx;
                    }
                }
            }

            .price {
                font-size: 30rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #F20707;
                margin-bottom: 20rpx;
            }

            .business-hours {
                display: flex;
                align-items: center;
                margin-bottom: 30rpx;

                .business {
                    background: #009A44;
                    border-radius: 12rpx 0rpx 0rpx 12rpx;
                    font-size: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    padding: 4rpx 10rpx;
                }

                .hours {
                    font-size: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #009A44;
                    background-color: rgba(0, 154, 68, 0.1);
                    padding: 4rpx 16rpx;
                    border-radius: 0 12rpx 12rpx 0;
                }
            }

            .address {
                display: flex;
                align-items: center;
                border-top: 2rpx solid #EEEEEE;
                padding-top: 28rpx;
                .address-l {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    image {
                        width: 23rpx;
                        height: 28rpx;
                        margin-right: 10rpx;
                    }
                }
                .address-r{
                    font-size: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #0787F8;
                    flex-wrap: nowrap;
                }
            }
        }
    }
}</style>